{% extends "admin/base.html" %}

{% block title %}控制面板 - 管理后台 - 万岛潜水{% endblock %}

{% block page_title %}控制面板{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-3 mb-4">
        <div class="card text-white bg-primary">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title">用户总数</h6>
                        <h2 class="mb-0">{{ stats.users_count }}</h2>
                    </div>
                    <i class="fas fa-users fa-3x opacity-50"></i>
                </div>
                <div class="mt-3">
                    <a href="{{ url_for('main.admin_users') }}" class="text-white">查看详情 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card text-white bg-success">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title">预约总数</h6>
                        <h2 class="mb-0">{{ stats.bookings_count }}</h2>
                    </div>
                    <i class="fas fa-clipboard-list fa-3x opacity-50"></i>
                </div>
                <div class="mt-3">
                    <a href="{{ url_for('main.admin_bookings') }}" class="text-white">查看详情 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card text-white bg-info">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title">课程总数</h6>
                        <h2 class="mb-0">{{ stats.courses_count }}</h2>
                    </div>
                    <i class="fas fa-book fa-3x opacity-50"></i>
                </div>
                <div class="mt-3">
                    <a href="{{ url_for('main.admin_courses') }}" class="text-white">查看详情 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title">活动总数</h6>
                        <h2 class="mb-0">{{ stats.activities_count }}</h2>
                    </div>
                    <i class="fas fa-calendar-alt fa-3x opacity-50"></i>
                </div>
                <div class="mt-3">
                    <a href="{{ url_for('main.admin_activities') }}" class="text-white">查看详情 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">预约统计</h5>
            </div>
            <div class="card-body">
                <canvas id="bookingsChart" height="300"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">课程分布</h5>
            </div>
            <div class="card-body">
                <canvas id="coursesChart" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">最近预约</h5>
                <a href="{{ url_for('main.admin_bookings') }}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户</th>
                                <th>课程</th>
                                <th>日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for booking in recent_bookings %}
                            <tr>
                                <td>{{ booking.id }}</td>
                                <td>{{ booking.user.username }}</td>
                                <td>{{ booking.course.name }}</td>
                                <td>{{ booking.booking_date.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    {% if booking.status == 'pending' %}
                                    <span class="badge bg-warning text-dark">待确认</span>
                                    {% elif booking.status == 'confirmed' %}
                                    <span class="badge bg-success">已确认</span>
                                    {% elif booking.status == 'completed' %}
                                    <span class="badge bg-info">已完成</span>
                                    {% elif booking.status == 'cancelled' %}
                                    <span class="badge bg-danger">已取消</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">最新用户</h5>
                <a href="{{ url_for('main.admin_users') }}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>注册时间</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in recent_users %}
                            <tr>
                                <td>{{ user.id }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    {% if user.is_admin %}
                                    <span class="badge bg-danger">管理员</span>
                                    {% elif user.is_member %}
                                    <span class="badge bg-success">会员</span>
                                    {% else %}
                                    <span class="badge bg-secondary">普通用户</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 预约统计图表
    var bookingsCtx = document.getElementById('bookingsChart').getContext('2d');
    var bookingsChart = new Chart(bookingsCtx, {
        type: 'line',
        data: {
            labels: {{ booking_stats.labels|tojson }},
            datasets: [{
                label: '预约数量',
                data: {{ booking_stats.data|tojson }},
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 课程分布图表
    var coursesCtx = document.getElementById('coursesChart').getContext('2d');
    var coursesChart = new Chart(coursesCtx, {
        type: 'doughnut',
        data: {
            labels: {{ course_stats.labels|tojson }},
            datasets: [{
                data: {{ course_stats.data|tojson }},
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)'
                ],
                borderWidth: 1
            }]
        }
    });
</script>
{% endblock %} 